<template>
  <div class="gjf-cart">
    <div class="gjf-cart-header">
      <span class="gif-cart-header-text" v-show="show" @click="text">编辑</span>
      <span class="gif-cart-header-text" v-show="!show" @click="textout">完成</span>
    </div>
    <div class="gjf-cart-list">
      <div class="gjf-cart-list-item" v-for="(m,index) in cartList" :key="index">
        <div class="gjf-cart-list-item-check" >
          <van-checkbox v-model="m.check" v-on:change="ddcheck(m.item.id)"></van-checkbox>
        </div>
        <div class="gjf-cart-list-item-img">
          <img :src="m.item.img" alt="">
        </div>
        <div class="gjf-cart-list-item-mess">
          <p>{{m.item.name}}</p>
          <p class="gjf-cart-list-item-mess-num"><span>{{m.item.price}}</span>
              <span class="gjf-list-item-mess-add">
                <button @click="sub(m.item.id)" :class="m.num==1?'gjf-cart-list-item-sub':'gjf-cart-list-item-sub-sel'">-</button><span>{{m.num}}</span><button @click="add(m.item.id)">+</button>
              </span>
          </p>
        </div>
      </div>
    </div>
    <div class="gjf-cart-bottom">
      <van-checkbox  class="gjf-cart-checkout" v-model="check1" v-on:change="qx">全选</van-checkbox>
      <div class="gjf-cart-totalprice" v-show="show">合计：{{totalprice}}元</div>
      <div class="gjf-cart-button" v-show="show">
        结算
      </div>
      <div class="gjf-cart-button" @click="dell" v-show="!show">
        删除
      </div>
    </div>
    <!-- <Tabbar/> -->
  </div>
</template>

<script>
// import Tabbar from '../components/Tabar'
export default {
  name: '',
  data() {
    return {
      check1:this.$store.state.check,
      show:true
    };
  },
  components:{
    // Tabbar
  },
  computed:{
    cartList(){
      return this.$store.state.cartList
    },
    checked1(){
      return this.$store.state.check
    },
    totalprice(){
      let bb=0
      let aa=this.cartList.some((resp)=>{
        return resp.check
      })
      if(aa==false){
        bb+=0
      }else{
        this.cartList.map((m)=>{
          if(m.check){
            bb+=m.num*m.item.price
          }
        })
      }
      return bb
    }
  },
  watch:{
    checked1:{
        deep:true,
        handler:function(newV){
          this.check1=newV
        }
      }
  },
  methods: {
    ddcheck(id){
      this.$store.dispatch("dd",id)
    },
    sub(id){
      this.$store.dispatch("sub",id)
    },
    add(id){
      this.$store.dispatch("add",id)
    },
    qx(){
      
      this.$store.dispatch('qx',this.check1)
    },
    text(){
      this.show=!this.show
      this.$store.dispatch("text")
    },
    textout(){
      this.show=!this.show
      this.$store.dispatch('textout')
    },
    dell(){
      this.$store.dispatch('dell')
    }
  },
  mounted(){
    
  }
};
</script>

<style scoped>
.gjf-cart-list-item-sub{
  visibility:hidden
}
.gjf-cart-list-item-sub-sel{
  visibility:visible
}
.gjf-cart{
  width: 100%;
}
.gjf-cart-header{
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.gjf-cart-header span{
  color: blue;
}
.gjf-cart-list{
  position: fixed;
  top: 3.125rem;
  left: 0;
  right: 0;
  bottom: 2.8125rem;
  overflow: scroll;
}
.gjf-cart-list-item{
  width: 100%;
  height: 12.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gjf-cart-list-item-check{
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gjf-cart-list-item-img{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gjf-cart-list-item-mess{
  width: 40%;
  height: 100%;
  position: relative;
}
.gjf-cart-list-item-mess p{
  margin-top: 1.25rem;
}
.gjf-cart-list-item-mess-num{
  width: 100%;
  position: absolute;
  left: 5px;
  bottom: .625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gjf-list-item-mess-add{
  margin-right: 1.25rem;
}
.gjf-list-item-mess-add button{
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
.gjf-list-item-mess-add span{
  margin: 0rem .625rem;
}
.gjf-cart-list-item img{
  width: 100%;
}
.gjf-cart-bottom{
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: start;
  align-items: center;

}
.gjf-cart-checkout{
  flex: 2;
}
.gjf-cart-totalprice{
  flex: 4.5;
  color: red;
}
.gjf-cart-button{
  flex: 2;
  height: 2.8125rem;
  text-align: center;
  line-height: 2.8125rem;
  color: white;
  background: chocolate;
}
</style>
